<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script type="text/javascript" src="Property.js"></script>
		<script type="text/javascript">

prop.CProperty=function(object,options){
	prop.Property.apply(this,arguments);
	
};


function Elem(el){
	this.el=(typeof(el)=="string")?document.getElementById(el):el;
	this.id=this.el.id;
	this.el.thisEl=this;
	prop.Property.init(this,["x","y","pos"]);
}
Elem.prototype.x={
	get:function(){
		return parseFloat(this.el.style.left);
	},
	set:function(value){
		this.el.style.left=value+"px";
	}
};
Elem.prototype.y={
	get:function(){
		return parseFloat(this.el.style.top);
	},
	set:function(value){
		this.el.style.top=value+"px";
	}
};
Elem.prototype.pos={
	type:prop.Object,
	get:function(){
		return {
			x: parseFloat(this.el.style.left),
			y: parseFloat(this.el.style.top)
		};
	},
	set:function(value){
		this.el.style.left=value.x+"px";
		this.el.style.top=value.y+"px";
	}
};


var Cursor={
	_cX:0,
	_cY:0,
	init:function(){
		prop.Property.init(Cursor,["x","y","pos"]);
		document.onmousemove=Cursor._mousemove;
	},
	_mousemove:function(e){
		e=e || event;
		Cursor.x.set(e.clientX || e.pageX);
		Cursor.y.set(e.clientY || e.pageY);
	},
	x:{
		get:function(){
			return Cursor._cX;
		},
		set:function(v){
			Cursor._cX=v;
		}
	},
	y:{
		get:function(){
			return Cursor._cY;
		},
		set:function(v){
			Cursor._cY=v;
		}
	},
	pos:{
		type:prop.Object,
		combine:["x","y"]
	}
};
Cursor.init();

Cursor.pos.listen(function(o,n){
	Cursor.x.set(n.x,false);
	Cursor.y.set(n.y,false);
});

Cursor.x.listen(function(o,n){
	Cursor.pos.set({x:n,y:Cursor.y.get()});
});
Cursor.y.listen(function(o,n){
	Cursor.pos.set({x:Cursor.x.get(),y:n});
});

var test, other;


		</script>
	</head>
	<body>
		<div id="test" style="position:absolute;left:100px;top:100px;width:100px;height:100px;border: 1px solid black;background:red;">
			Left: 100px
		</div>
		<div id="other" style="position:absolute;left:300px;top:100px;width:50px;height:20px;border: 1px solid black;background:blue;">
		inner
		</div>
		<button onclick="alert(test.pos.get().x+'-'+test.pos.get().y);">get()</button>
		<button onclick="test.pos.set({x:10,y:35});">set({x:10,y:35})</button>
		<button onclick="test.pos.add({x:10,y:10});">add({x:10,y:10})</button>
		<button onclick="test.pos.add({x:-10,y:-10});">add({x:-10,y:-10})</button>
		<button onclick="other.pos.set(test.pos);">movo to</button>
		<button onclick="other.pos.unbind();">Unbind</button>
		<button onclick="other.pos.bind(test.pos);">Bind, no offset</button>
		<script type="text/javascript">
			test=new Elem("test");
			other=new Elem("other");
			
			other.pos.bind(test.pos, function(value){
				return {
					x: value.x + 10,
					y: value.y + 10
				};
			});
			/*test.pos.bind(Cursor.pos,function(value){
                return {
                    x: value.x - 30,
                    y: value.y - 30
                };
			});*/
			test.x.bind(Cursor.x);
		</script>
	</body>
</html>
